<template>
	<!-- bootstrap 轮播 -->
	<div id="myContainer" class="carousel carousel-fade" data-bs-interval='4000' data-bs-ride="carousel">
		<!-- banner-img -->
		<div class="bannerBox carousel-inner">
			<div v-for="(item,index) in bannerImgData.imgData" :key="index" :class="['carousel-item',index==0?'active':'']" :style="`background:url(${item.bannerBg}) no-repeat;background-size: 6000px;background-position:center center;`">
				<div class="bannerImg wrap">
					<a href="#" class="h-100 d-inline-block">
						<img :src="item.bannerImg" style="width: 730px;max-width: 100%;height: auto;">
					</a>
					<!-- 下载 -->
					<div class="downLoad">
						<a href="#"></a>
						<p>PC 安卓 iPhone WP iPad Mac 六大客户端</p>
						<span class="shadowa" style="left: -20px;"></span>
						<span class="shadowa" style="right: -20px;background-position: -20px 0;"></span>
					</div>
				</div>
			</div>
		</div>
		<!-- banner-dots -->
		<div class="carousel-indicators">
			<div v-for="(dot,index) in bannerImgData.imgData" class="dots">
				<button type="button" data-bs-target="#myContainer" :data-bs-slide-to="index" :class="[index==0?'active':'']"></button>
			</div>
		</div>
		<!-- banner-left right -->
		<button class="carousel-control-prev" type="button" data-bs-target="#myContainer" data-bs-slide="prev">
			<span class="carousel-control-prev-icon" aria-hidden="true"></span>
			<span class="visually-hidden">Previous</span>
		</button>
		<button class="carousel-control-next" type="button" data-bs-target="#myContainer" data-bs-slide="next">
			<span class="carousel-control-next-icon" aria-hidden="true"></span>
			<span class="visually-hidden">Next</span>
		</button>
	</div>
</template>

<script setup>
	import axios from 'axios';
	import {reactive,onMounted} from 'vue';
	
	const bannerImgData=reactive({
		// 当前图片index
		currentIndex:0,
		flag:true,
		imgData:[]
	})
	onMounted(()=>{
		axios.get(`https://mock.apifox.cn/m1/2897896-0-default/banner?banner=<banner>`)
		.then(function (response) {
			bannerImgData.imgData=response.data.bannerImg;
			// console.log(bannerImgData.imgData)
		})
		
	})
	const startTime=()=>{
		window.setInterval(()=>{
			bannerImgData.currentIndex++;
			if(bannerImgData.currentIndex>bannerImgData.imgData.length-1){
				bannerImgData.currentIndex=0
			}
			show(bannerImgData.currentIndex)
		},5000)
	}
</script>

<style>
	/* lb-bannerBox */
	.bannerBox{
		height: 285px;
	}
	/* lb-bannerImg */
	.wrap{
		position: relative;
		width: 982px;
		margin: 0 auto;
	}
	/* lb-dots */
	.dots button:hover{
		background-color: #c00c0c;
	}
	/* download */
	.downLoad{
		position: absolute;
		top: 0;
		z-index: 20;
		right: -1px;
		width: 254px;
		height: 285px;
		background: url('../assets/bannerImg/download.png') no-repeat;
	}
	.downLoad a{
		display: inline-block;
		width: 215px;
		height: 56px;
		margin: 186px 19px 0 19px;
		background: url('../assets/bannerImg/download.png') no-repeat 0 999px;
	}
	.downLoad a:hover{
		background-position: 0 -290px;
	}
	.downLoad p{
		margin: 10px auto;
		text-align: center;
		color: #8d8d8d;
		font-size: 12px;
	}
	/* 阴影 */
	.shadowa{
		display: block;
		position: absolute;
		top: 0;
		width: 20px;
		height: 285px;
		background: url('../assets/bannerImg/left-right.png') no-repeat;
	}
</style>